<template>
	<uniPopup
	ref="popup" :mask-click="false">
		<view class="receive-info-box flex_column flex_hcneter">
		    <view class="coupon-receive-box flex_column flex_hcneter" v-if="stepIndex===1">
		        <image :src="imgPath.coupon_coupon_receive_bg_01"></image>
		        <view class="coupon-receive-title flex_zhcenter flex_column">
		            <view class="main-title">恭喜</view>
		            <view class="sub-title txt-ellipsis--l2">
									您有<text>{{count}}</text>次抽取优惠券的机会！
		            </view>
		        </view>
		        <view class="btn flex_zhcenter" @click="$u.throttle(handleReceive, 500)">立即领取</view>
		    </view>
				<view class="coupon-money-box" v-if="stepIndex===2">
				    <image :src="imgPath.coupon_coupon_receive_bg_02"></image>
				    <view class="amount">
				        <view class="unit">¥</view>
				        <view class="count">{{drawInfo.couponMoney || 0}}</view>
				    </view>
				    <view class="tip">请至小程序《个人中心-优惠券》进行查看</view>
				    <view class="date">有效期至{{drawInfo.endDate || ''}}</view>
				    <view 
						class="btn flex_zhcenter" 
						@click="gotoPage" 
						>去使用</view>
				</view>
				<view class="coupon-money-box" v-if="stepIndex===3">
				    <image :src="imgPath.coupon_coupon_receive_bg_02"></image>
				    <view class="un-receive-text">
				        <view>很遗憾~</view>
				        <view>您与优惠券擦肩而过</view>
				    </view>
				    <view 
						class="btn flex_zhcenter" 
						@click="gotoPage" 
						>确定</view>
				</view>
				<view class="receive-close-box" @click="close">
				    <image :src="imgPath.coupon_coupon_dialog_close_icon"></image>
				</view>
		</view>
	</uniPopup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	
	import {bindPhoneTip} from '@/utils/userModel.js';
	import  { imgPath } from '@/static/imgPath.js'
	export default {
	  name: "index",
	  components: {
	    uniPopup
	  },
		props: {
			drawId: {//抽奖ID
				type: [String],
				default:()=>{
					return ''
				}
			},
			drawType: {
				//抽奖类型 (pay: 支付抽奖； park 停车抽奖； list：多次抽奖)
				type: [String],
				default:()=>{
					return ''
				}
			},
		},
	  data() {
	    return {
				imgPath,//图片路径
				stepIndex: 1,//显示的模式
				drawInfo: {}, //优惠券详情
				count: 0, //抽奖次数
				currentDrawId: "", //当前抽奖ID
	    };
	  },
	  mounted() {
	    
	  },
	  methods: {
			pdRpx(e){
				return e.indexOf('rpx') == -1 ? (e.indexOf('%') == -1 ? e + 'rpx' : e) : e
			},
			/**
			 * 跳转页面
			 */
			gotoPage(e) {
				uni.navigateTo({
						url: '/pages/personal/coupon'
				})
			},
			//打开浮窗
			open(e) {
				this.$refs.popup.open(e || 'center')
				if (this.drawType === 'pay' || this.drawType === 'park') {
					this.count = 1
					this.currentDrawId = this.drawId
				} else if (this.drawType === 'list') {
				  this.getChanceList()
				}
				this.$emit('open')
			},
			//关闭浮窗
			close() {
			  this.$refs.popup.close()
				setTimeout(() => {
				  this.stepIndex = 1
				}, 2000)
				this.$emit('close')
			},
			/**
			 * 点击领取优惠券
			 */
			async handleReceive() {
				let userInfo = uni.getStorageSync("userInfo")
			  if (!userInfo.phone) return bindPhoneTip()
			  if (this.count === 0) return this.$u.toast('暂无抽奖机会');
				
				if (this.currentDrawId) {
					console.log('this.currentDrawId',this.currentDrawId)
					let res = await this.$u.api.drawCouponChanceId(this.currentDrawId)
					if(!res) return
					let data = res.data
					if (data) {
						this.drawInfo = data
						this.stepIndex = 2
						this.count = 0
					} else {
						this.stepIndex = 3
						this.count = 0
					}
					if (this.drawType === 'list') this.getChanceList()
					this.$emit('reduceChanceCount')
				}
			},
			/**
			 * 多次抽奖 获取抽奖列表
			 */
			async getChanceList() {
			  let res = await this.$u.api.chanceList()
				if(!res) {
					this.chanceList = []
					this.currentDrawId = ''
					this.count = 0
					return
				}
				let data = res.data || []
				if (data.length > 0) {
					this.chanceList = data
					this.currentDrawId = data[0].id
					this.count = data.length
				}
			},
	  }
	};
</script>

<style lang="less" >
	.receive-info-box{
		.coupon-receive-title {
		  width: 85%;position: absolute;top: 84rpx;color: #C33428;
			margin: 0 auto;
			.main-title{font-size: 48rpx;}
			.sub-title{font-size: 34rpx;text-align: center;}
			text{font-size: 50rpx;}
		}
		.coupon-receive-box {
			width: 512rpx;height: 672rpx;
			position: relative;margin-bottom: 76rpx;
			image {width: 512rpx;height: 672rpx;}
			.btn {
				width: 296rpx;height: 78rpx;
				position: absolute;bottom: 68rpx;
				transform: translate(-50%, 0);left: 50%;color: #C73428;
				font-size: 36rpx;z-index: 99;
				background: linear-gradient(to bottom, #FDECD9, #F0AF72);
				border-radius: 50rpx;
			}
		}
		
		.coupon-money-box {
			/* #ifndef H5 */
			width: 517rpx;height: 388rpx;
			image {width: 517rpx;height: 388rpx;}
			/* #endif */
			/* #ifdef H5 */
			width: 577rpx;height: 468rpx;
			image {width: 577rpx;height: 468rpx;}
			/* #endif */
			position: relative;margin-bottom: 32rpx;
			.amount {
				position: absolute;left: 50%;
				transform: translate(-50%, 0);top: 50rpx;
				/* #ifdef H5 */
				top: 72rpx;
				/* #endif */
				/* #ifndef H5 */
				top: 50rpx;
				/* #endif */
				display: flex;justify-content: center;align-items: baseline;
				.unit {color: #EF5142;font-size: 46rpx;}
				.count {color: #EF5142;font-size: 90rpx;}
			}
			.tip {
				position: absolute;top: 168rpx;font-size: 14rpx;text-align: center;
				color: #CE5845;width: 100%;
				/* #ifdef H5 */
				top: 190rpx;
				/* #endif */
				/* #ifndef H5 */
				top: 168rpx;
				/* #endif */
			}
			.date {
				position: absolute;font-size: 14rpx;
				text-align: center;color: #CE5845;width: 100%;
				/* #ifdef H5 */
				top: 238rpx;
				/* #endif */
				/* #ifndef H5 */
				top: 202rpx;
				/* #endif */
			}
			.btn {
				width: 174rpx;height: 49rpx;
				background: linear-gradient(90deg, #FCD575 0%, #FFC33E 100%);
				border-radius: 90rpx;opacity: 1;position: absolute;
				left: 50%;transform: translate(-50%, 0);
				font-size: 28rpx;color: #D1352A;
				/* #ifdef H5 */
				top: 360rpx;
				/* #endif */
				/* #ifndef H5 */
				top: 300rpx;
				/* #endif */
				
			}
			.un-receive-text {
			  width: 100%;position: absolute;
				/* #ifdef H5 */
				top: 114rpx;
				/* #endif */
				/* #ifndef H5 */
				top: 90rpx;
				/* #endif */
				display: flex;
			  flex-direction: column;align-items: center;
			  font-size: 22rpx;color: #EF5142;line-height: 44rpx;
			}
		}
	
		.receive-close-box{
			width: 61rpx;height: 61rpx;
			image {width: 61rpx;height: 61rpx;}
		}
	}
</style>